<template>
    <div style="box-sizing: border-box;padding: 10px;">
        <el-input placeholder="请输入转入会员卡号" v-model="card_sn" @keyup.enter.native.prevent="onSearch">
            <el-button slot="append" icon="el-icon-search" clearable @click.prevent="onSearch">查询</el-button>
        </el-input>
        <template v-if="inCard === null">
                <div class="bw-empty">
                    暂无数据
                </div>
        </template>
        <template v-else>
            <el-card v-if="inCard" style="margin-top: 10px;">
                <div slot="header" class="clearfix">
                    <span>转入账号</span>
                </div>
                <table class="el-table bw-table" style="margin-bottom: 10px;">
                    <tr>
                        <td>卡号:</td><th>{{inCard.card_sn}}</th>
                        <td>姓名:</td><th>{{inCard.name}}</th>
                        <td>手机号:</td><th>{{inCard.mobile}}</th>
                    </tr>
                    <tr>
                        <td>余额:</td><th style="color: red;" class="text-price">{{inCard.money}}</th>
                        <td>积分:</td><th style="color: red;">{{inCard.score}}</th>
                        <td>性别:</td><th>{{inCard.sex}}</th>
                    </tr>
                    <tr>
                        <td>备注:</td><th colspan="3">{{inCard.remark}}</th>
                    </tr>
                </table>
            </el-card>
            <el-row :gutter="20" class="tools">
                <el-col :span="6">
                    <el-input v-model="money">
                        <template slot="prepend">金额</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-input v-model="score">
                        <template slot="prepend">积分</template>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button icon="el-icon-ice-cream" type="primary" @click.prevent="onTransfer">立即转账</el-button>
                </el-col>
            </el-row>
        </template>
    </div>
</template>

<script>
    import {mapState} from "vuex";
    export default {
        name: "Transfer",
        computed: {
            // ...mapState({
            //     current: state => state.card.current,
            // }),
        },
        data(){
            return{
                card_sn:'',
                inCard:null,
                money:0,
                score:0,
                current: {
                    card_sn: '11',
                    name: '111',
                    mobile: '111',
                    money: '111',
                    score: '111',
                    remark: '111'
                }
            }
        },
        watch:{
            card_sn(val){
                if(val.length === 0){
                    this.inCard = null
                }
            }
        },
        methods:{
            onSearch(){
                console.log(this.card_sn)
                this.$http.post('/api/member-cards/search',{keyword:this.card_sn}).then(ret =>{
                    console.log(ret)
                    this.inCard = ret.data[0]
                    this.money = parseInt(this.current.money)
                    this.score = this.current.score
                })
            },
            onTransfer(){
                if(this.money === 0 && this.score === 0){
                    this.$message({type:'error',message:'转账金额或积分不能都为0'})
                    return false;
                }
                if(!this.inCard){
                    this.$message({type:'error',message:'转入卡不存在,刷新再试'})
                    return false;
                }
                if(this.current.card_sn === this.inCard.card_sn){
                    this.$message({type:'error',message:'转入转出卡号相同'})
                    return false;
                }
                if(!this.current.card_sn){
                    this.$message({type:'error',message:'转出卡不存在,刷新再试'})
                    return false;
                }
                console.log(this.money,this.current.money)
                if(!this.money || this.money > parseInt(this.current.money)){
                    this.$message({type:'error',message:'转账金额格式错误或者转账金额大于转出卡余额'})
                    return false;
                }
                this.$http.post('/api/member-cards/transfer',{
                    out_card:this.current.card_sn,
                    in_card:this.inCard.card_sn,
                    money:this.money,
                    score:this.score,
                }).then(ret =>{
                    let {data} = ret
                    this.$message({type:data.type,message:data.message})
                    if(data.outCard){
                        this.$store.dispatch('card/selectCard',data.outCard)
                    }
                    if(data.inCard){
                        this.inCard = data.inCard
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .bw-table{
        th{
            border: none;
        }
        td{
            border: none;
        }
    }
    .bw-empty{
        text-align: center;
        box-sizing: border-box;
        padding: 20px;
    }
    .tools{
        margin-top: 10px;
    }
</style>